<template>
  <div class="log-manage-index sub-margin">
    <!-- <div class="sub-page-title">职位管理</div> -->
    <div class="content">
      <div class="left-con">
        <OrganList :source="oragnList" @node-click="onOrganClick"></OrganList>
      </div>
      <div class="right-con">
        <LogTable
          ref="logTable"
          :source="tableList"
          :post-code="searchForm.postCode"
          @edit-account="openDialog"
          @del-account="delAccount">
          <div slot="search" class="search-box">
            <div class="search-left">
              <div class="search-item">
                <el-input
                  placeholder="请输入内容"
                  v-model.trim="searchForm.postName"
                  size="small"
                  clearable
                  @keyup.enter.native="onTableSearch">
                  <el-button slot="append" icon="el-icon-search" @click.stop="onTableSearch"></el-button>
                </el-input>
              </div>
            </div>
            <div class="search-right">
              <el-button type="primary" size="small" icon="el-icon-plus" @click.stop="onAddEdit">新建职位</el-button>
            </div>
          </div>
          <pagination
            slot="pagination"
            :page-size="pageParam.pageSize"
            :total="pageParam.totalSize"
            :current-page="pageParam.pageNum"
            @change="onPageChange"></pagination>
        </LogTable>
      </div>
    </div>
    <LogDialog :visible.sync="showDialog" :info="curAccount" @submit="onAccountSubmit"></LogDialog>
  </div>
</template>
<script>
import LogTable from './components/LogTable.vue'
import LogDialog from './components/LogDialog'
import pagination from '@com/pagination'
import OrganList from './components/OrganList'
import { listUiasOrgPost, listRecursiveOrgan, savePost, editPost, delPost } from '@api/modules/system.js'
export default {
  name: 'logManageIndex',
  components: { LogTable, LogDialog, pagination, OrganList },
  emits: [],
  props: {},
  data() {
    return {
      searchForm: {
        postName: '',
        orgId: '',
      },
      tableList: [],
      loading: false,
      oragnList: [],
      showDialog: false,
      curAccount: {},
      pageParam: {
        pageNum: 1,
        pageSize: 10,
        totalSize: 0,
      },
    }
  },
  created() {
    this.getOrganList()
  },
  methods: {
    async getOrganList() {
      const { status, data } = await listRecursiveOrgan()
      if (status === 200 && data && data.length) {
        this.oragnList = data
      } else {
        this.oragnList = []
      }
    },
    async initdata() {
      const { status, data } = await listUiasOrgPost({ ...this.searchForm, ...this.pageParam })
      if (status === 200 && data) {
        this.tableList = data.content || []
        this.pageParam.totalSize = data.totalSize || 0
      } else {
        this.pageParam.totalSize = 0
        this.tableList = []
      }
    },
    searchData() {
      this.pageParam.pageNum = 1
      this.pageParam.pageSize = 10
      this.initdata()
    },
    onPageChange(obj) {
      this.pageParam.pageNum = obj.pageNumber
      this.pageParam.pageSize = obj.pageSize
      this.initdata()
    },
    onOrganClick(data) {
      this.searchForm.orgId = data.id
      this.pageParam.pageNum = 1
      this.initdata()
    },
    openDialog(data) {
      this.curAccount = data
      this.showDialog = true
    },
    delAccount(data) {
      delPost(data.id).then(res => {
        if (res.status === 200) {
          this.$message.success(res.message)
          this.initdata()
        }
      })
    },
    onTableSearch() {
      this.searchData()
    },
    onAddEdit() {
      this.curAccount = {}
      this.showDialog = true
    },
    onAccountSubmit(data) {
      if (data.postId) {
        editPost(data).then(res => {
          if (res.status === 200) {
            this.$message.success(res.message)
            this.initdata()
          }
        })
      } else {
        savePost(data).then(res => {
          if (res.status === 200) {
            this.$message.success(res.message)
            this.initdata()
          }
        })
      }
    },
  },
}
</script>
<style lang="scss" scoped>
@import '@styles/layout.scss';
.log-manage-index {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  .content {
    flex: 1;
    display: flex;
    align-items: stretch;
    padding: 20px 0;
    height: calc(100vh - 110px);
    .left-con {
      width: 300px;
      height: 100%;
      overflow: auto;
      position: relative;
      border-right: 1px solid #e4eaf0;
    }
    .right-con {
      // flex: 1;
      // width: 100%;
      // max-width: 1020px;
      width: calc(100% - 300px);
      margin: 0 auto;
      margin-left: 20px;
      position: relative;
      display: flex;
      flex-direction: column;
    }
  }
}
</style>
